<form id="<?php echo $uniqid;?>" method="post" style="padding: 8px;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">店铺ID：</td>
            <td width="80%">{{params.id}}</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">店铺店长信息：</td>
            <td width="80%">
                <template v-for="(item, index) in params.member">
                    <div style="line-height: 22px;" v-if="item.is_root === 1">
                        ID:{{item.id}}<br>
                        昵称:{{item.nickname}}<br>
                        电话:{{item.phone}}
                    </div>
                </template>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">店铺名称：</td>
            <td width="80%">
                <el-input type="text" size="mini" v-model="params.name" placeholder="请输入店铺名称.." maxlength="20" show-word-limit></el-input>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">企业名称：</td>
            <td width="80%">
                <el-input type="text" size="mini" v-model="params.company_name" placeholder="请输入企业名称.." maxlength="20" show-word-limit></el-input>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">企业法定代表人姓名：</td>
            <td width="80%">
                <el-input type="text" size="mini" v-model="params.company_representative_name" placeholder="请输入企业法定代表人姓名.." maxlength="10" show-word-limit></el-input>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">联系电话：</td>
            <td width="80%">
                <el-input type="text" size="mini" v-model="params.phone" placeholder="请输入联系电话.." maxlength="20" show-word-limit></el-input>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >注册地区域：</td>
            <td width="80%">
                <el-select v-model="params.province_id" size="mini" @change="provChange" placeholder="请选择省份" popper-class="zindex_popper" style="max-width: 150px;">
                    <el-option v-for="item in prov"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-if="params.province_id>0" v-model="params.city_id" @change="cityChange" size="mini" placeholder="请选择城市" popper-class="zindex_popper" style="max-width: 150px;">
                    <el-option v-if="item.pid==params.province_id" v-for="item in city"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-if="params.province_id>0 && params.city_id>0" v-model="params.area_id" size="mini" placeholder="请选择城市" popper-class="zindex_popper" style="max-width: 150px;">
                    <el-option v-if="item.pid==params.city_id" v-for="item in area"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >注册地址：</td>
            <td width="80%">
                <el-input type="text" size="mini" v-model="params.address" placeholder="请输入注册地址.." maxlength="100" show-word-limit></el-input>
            </td>
        </tr>
    </table>
</form>

<script>
    var dianpuEditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            submitParams:{
                id:0,
                name:'',
                company_name:'',
                company_representative_name:'',
                phone:'',
                province_name:'',
                city_name:'',
                area_name:'',
                province_id:0,
                city_id:0,
                area_id:0,
                address:0,
            },
            prov: JSON.parse('<?php echo addslashes($prov);?>'),
            city: JSON.parse('<?php echo addslashes($city);?>'),
            area: JSON.parse('<?php echo addslashes($area);?>'),
        },
        methods: {
            provChange:function (){
                this.params.city_id = null;
                this.params.area_id = null;
            },
            cityChange:function (){
                this.params.area_id = null;
            },
            submit: function () {
                this.submitParams.id = this.params.id;
                this.submitParams.name = this.params.name;
                this.submitParams.company_name = this.params.company_name;
                this.submitParams.company_representative_name = this.params.company_representative_name;
                this.submitParams.phone = this.params.phone;
                this.submitParams.province_id = this.params.province_id;
                this.submitParams.city_id = this.params.city_id;
                this.submitParams.area_id = this.params.area_id;
                this.submitParams.address = this.params.address;
                if(this.params.province_id){
                    for (item of this.prov){
                        if(item.id === this.params.province_id){
                            this.submitParams.province_name = item.name;
                            break;
                        }
                    }
                }
                if(this.params.city_id){
                    for (item of this.city){
                        if(item.id === this.params.city_id){
                            this.submitParams.city_name = item.name;
                            break;
                        }
                    }
                }
                if(this.params.area_id){
                    for (item of this.area){
                        if(item.id === this.params.area_id){
                            this.submitParams.area_name = item.name;
                            break;
                        }
                    }
                }
                $.post('/admin/dianpu/edit', this.submitParams, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#dianpudlg").dialog('close');
                        dianpuReload();
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    $(function () {
        $('#dianpuEditsubmit').click(function (data) {
            dianpuEditVm.submit();
        });
    });
</script>
<style>
    .zindex_popper{
        z-index: 20000 !important;
    }
</style>